<template>
	<view>
		<u-navbar
			title="交易记录"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view style="background-color: #fff;">
			<u-tabs :scrollable="false" :current="current" @change="tabClick" :list="list" :lineColor="appColor" :lineWidth="42" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
		</view>
		<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else-if="!loading && list.length === 0">
				<u-empty
				    mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</template>
			<template v-else-if="!loading && list.length > 0">
				<view class="record-box">
					<view :class="['record-item', dataList.length-1 === index ? null : 'u-border-bottom']" v-for="(item, index) in dataList" :key="index">
						<view class="record-item-l">
							<text class="record-item-l-1">{{item.consumeMethod_dictText || item.payMethod_dictText}}</text>
							<text class="record-item-l-2">{{item.createTime}}</text>
						</view>
						<text class="record-item-r" :style="{color: current === 0 ? appColor : '#f40215'}" >{{current === 0 ? '+' : '-'}}{{item.price}}</text>
					</view>
				</view>
				<u-loadmore :status="status" />
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {memberRechargeRecord, memberConsumeRecord} from '@/api/me.js';
	export default {
		data() {
			return {
				loading: false,
				current: 0,
				list: [
					{name: '充值'},
					{name: '消费'},
				],
				dataList: [],
				pageNo: 1,
				pageSize: 16,
				status: 'loadmore',
				scrollTop: 0
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 + 'px';
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			handleScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			onLower() {
				if(this.status === 'loading') {
					this.getList();
				}
			},
			tabClick({index}) {
				this.current = index;
				this.pageNo = 1;
				this.getList();
			},
			// 获取认养列表
			getList() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				let method = this.current ? memberConsumeRecord : memberRechargeRecord;
				method(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.record-box {
		background-color: #fff;
		.record-item {
			padding: 0 32rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.record-item-l {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.record-item-l-1 {
					font-size: 32rpx;
					line-height: 32rpx;
					color: #333;
					font-weight: bold;
					padding-bottom: 16rpx;
				}
				.record-item-l-2 {
					color: #666;
					font-size: 24rpx;
					line-height: 24rpx;
				}
			}
			.record-item-r {
				color: #333;
				font-weight: bold;
			}
		}
	}
</style>